import React from 'react'
import {withRouter} from 'react-router-dom'
import {Modal, Toast} from "antd-mobile";
import {connect,} from 'react-redux'
import CancelModalIcon from "../../res/images/web/game-room/cancel@2x.png";
import BigCoin from "../../res/images/web/shared/big-coin.png";
import BrownBlock from "../../res/images/web/game-room/tip brown@2x.png";
import OpaCoin from "../../res/images/web/shared/coin-o.png";
import CoinIcon from "../../res/images/web/shared/coin.png";
import CustomButton from "../CustomButton/CustomBotton";
import LocalStorageService from "../../utils/LocalStorageService";
import constants, {local, test} from "../../utils/constants";
import CheckIcon from "../../res/images/web/wallet/choose pay-selected@2x.png";
import UnCheckIcon from "../../res/images/web/wallet/choose@2x.png";
import WeChatIcon from "../../res/images/web/wallet/wechat 2@2x.png";
import {getDoms, getDom, log} from "../../utils/commonfunc";

class VipModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            payList: [
                {title: '微信(默认)', icon: WeChatIcon, select: true,},
            ],
        }
    }

    componentDidMount() {

        const login = LocalStorageService.get('isLogin')
        if (login) {
            this.checkWechatOrder()
        }

        this.checkMeta()

    }

    checkMeta = () => {
        const metaOrigin = getDom('[content=origin]')
        const metaNoRef = getDom('[content=no-referrer]')
        const head = getDom('head')
        log("metaOrigin", metaOrigin)
        log("metaNoRef", metaNoRef)
        log(head)
        if (metaNoRef) {
            head.removeChild(metaNoRef)
            const newMeta = document.createElement('meta')
            newMeta.content = 'origin'
            newMeta.name = 'referrer'
            head.appendChild(newMeta)
        }
    }


    confirmWechatOrder = (params) => {
        this.props.doCheckWechatOrder(params)
    }

    checkWechatOrder = () => {
        const search = this.props.location.search
        if (search === '') return
        let obj = {}
        search
            .slice(1)
            .split('&')
            .map(kv => {
                const arr = kv.split('=')
                const key = arr[0]
                const val = arr[1]
                obj[key] = val
            })
        // const goBack = obj.goback
        const dealno = obj.dealno
        const style = Number(obj.style)
        const styles = [100, 201, 202, 203, 204]
        if (styles.includes(style)) {
            const btnList = [
                { text: <span style={{color: constants.themeColor}}>已完成支付</span>, onPress: () => this.confirmWechatOrder({dealno, style,})},
                { text: <span style={{color: 'rgba(51,51,51,0.3)'}}>支付遇到问题, 重新支付</span>, onPress: () => {} },
                // {}
            ]
            Modal.alert('请确认微信支付是否完成', '', btnList)
        }
        // const list = search.split('?').slice(1)
        // const dealno = list[0].split('=')[1]
        // const goBack = list[1].split('=')[1]
        // this.setState({
        //     goBack,
        // })
        // const wxdealno = list[1].split('=')[1]

    }

    wechatPay = (params) => {
        let {
            uid,
            style,
        } = params

        let baseUrl

        const path = this.props.location.pathname

        if (test) {
            if (local) {
                baseUrl = 'http://localhost:3001'
            } else {
                baseUrl = 'http://123.207.85.242:8080'
            }
        } else {
            baseUrl = 'http://www.youtoball.com:8080'
        }

        let redirect = baseUrl + path + '?wechat=true' + `&style=${style}`
        this.props.doWechatPay({
            uid,
            style,
            redirect,
        })

    }

    buyVip = () => {
        // dealno //订单号
        // wxdealno //微信订单号
        // style //充值类型，金币1-6，vip购买100，ai预测购买100
        // matchid //赛事纳米id，当为ai预测购买的时候，需要填写
        // aitype //ai类型,当为ai预测购买的时候，需要填写
        // uid
        // style //充值类型，金币1-6，vip购买100，ai预测购买101
        const uid = LocalStorageService.get('userid')
        const style = this.props.style
        // this.props.doBuyVip({uid, style: 1})
        this.wechatPay({uid, style,})
    }

    render() {
        const {
            visible,
            onModalClose,
            style,
        } = this.props
        const priceMaps = {
            100: 10,
            201: 188,
            202: 15,
            203: 25,
            204: 50,
        }
        const titleMaps = {
            100: '月付版会员',
            201: '年付版会员',
            202: 'VIP房卷x3张',
            203: 'VIP房卷x5张',
            204: 'VIP房卷x10张',
        }
        const price = priceMaps[style]
        const title = titleMaps[style]

        const payList = this.state.payList.map((pay, i) => (
            <div
                key={i}
                className={`flex-space-between-align-center pay-list-item${pay.select ? ' pay-list-item-select' : ''}`}
                onClick={(e) =>this.handlePayItemClick(pay)}
            >
                <div className='flex-center-align-center'>
                    <img src={pay.icon} alt='' style={{marginRight: '8px', height: 28, width: 28,}}/>
                    <span>微信</span>
                </div>

                <div className='flex-center-align-center'>
                    <img alt='' style={{height: 24, width: 24,}} src={pay.select ? CheckIcon : UnCheckIcon}/>
                </div>
            </div>

        ))

        const modal = <Modal
            popup
            animationType="slide-up"
            // visible={this.state.modalShow}
            // onClose={() => {
            //     this.setState({
            //         modalShow: false,
            //     })
            // }}
            visible={visible}
            onClose={onModalClose}
        >

            <div
                style={{
                    width: '100%',
                    height: '285px',
                    backgroundColor: '#fff',
                    position: 'relative',
                    padding: '14px',
                    boxSizing: 'border-box',
                }}
            >
                <img
                    style={{
                        position: 'absolute',
                        right: '16px',
                        top: '12px',
                        width: '28px',
                    }}
                    src={CancelModalIcon}
                    alt=''
                    onClick={onModalClose}
                />

                <p
                    style={{
                        fontSize: '18px',
                        color: 'rgba(51,51,51,1)',
                        lineHeight: '25px',
                        marginBottom: '20px',
                    }}
                >{title}</p>

                <p
                    style={{
                        fontSize: '40px',
                        fontWeight: 'bold',
                        color: 'rgba(51,51,51,1)',
                        lineHeight: '47px',
                    }}
                >¥{price}</p>

                <div style={{textAlign: 'left', marginBottom: '6px'}}>
                    <span className='pay-list-title'>支付方式</span>
                    {payList}
                </div>

                <div
                    style={{
                        position: 'absolute',
                        bottom: '16px',
                        width: 'calc(100% - 28px)',
                        textAlign: 'right',
                    }}
                >

                    <CustomButton
                        onClick={this.buyVip}
                    ><span style={{letterSpacing: '12px'}}>确认支付</span></CustomButton>

                </div>

            </div>

        </Modal>

        return modal
    }

}

const mapDispatch = dispatch => ({
    doBuyVip: (payload) => dispatch.user.doBuyVip(payload),
    doWechatPay: (payload) => dispatch.user.doWechatPay(payload),
    doCheckWechatOrder: (payload) => dispatch.user.doCheckWechatOrder(payload),
})
export default connect(null, mapDispatch)(withRouter(VipModal))
